<template>
    <div class="topNav">
      <!-- 顶部导航 -->
        <a-dropdown class="hidden-xs-only" v-model="visible" overlayClassName="topNav-menu" :overlayStyle="styleObj">
            <ul class="navList">
                <li v-for="item in list" :key="item.id">
                    <div :class="{showline: showid == item.id}">{{item.name}}
                        <div name="line-show">
                            <span class="line"></span>
                        </div>
                    </div>
                </li>
                <li>
                    <div>免运费配送服务</div>
                </li>
            </ul>
            <!-- <a-menu slot="overlay">
                <a-menu-item>
                    <watches-glasses :num="159"/>
                </a-menu-item>
            </a-menu> -->
        </a-dropdown>
    </div>
</template>

<script>
import watchesGlasses from './nav/watches-glasses.vue'
export default {
    components:{
        watchesGlasses,
    },
    data() {
        return {
            visible: false,
            show: false,
            list:[
                {id:1, name:"新品"},
                {id:2, name:"腕表选购"},
                {id:3, name:"太阳眼睛"},
                {id:4, name:"客服服务"}
            ],
            // 显示下滑线
            showid:"",
            // 屏幕尺寸
            screenWidth: null
        }
    },
    computed:{
        // 记录屏幕的尺寸大小
        styleObj() {
            return {
                minWidth:this.screenWidth + "px",
            }
        }
    },
    mounted() {
        this.screenWidth = document.body.clientWidth
        console.log(this.screenWidth)
        // 屏幕尺寸变化就重新赋值
        window.onresize = () => {
            this.screenWidth = document.body.clientWidth;
            // console.log(this.styleObj)
        }
    },
    destroyed() {
        // 销毁监听window的宽事件
        console.log("销毁")
        window.onresize = null
    },
    methods: {
        noshow(){
            // this.visible = true
        }
    },
}
</script>

<style lang='scss' scoped>
    .topNav {
        background: white;
        .navList {
            font-size: 12px;
            font-weight: bolder;
            color: #003150;
            height: 60px;
            display: flex;
            justify-content: center;
            margin: 0;
            li {
                @media (min-width: 1005px) {
                    font-size: 14px;
                }
                padding: 0 15px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                div {
                    position: relative;
                    .line {
                        position: absolute;
                        left: 0px;
                        bottom: -1px;
                        margin-top: 5px;
                        display: inline-block;
                        width: 0;
                        height: 1px;
                        background: #003150;
                        transition: 1s all 1s;
                    }
                }
                // 选中是显示下滑线
                .showline {
                    div {
                        .line {
                            width: 100%;
                            transition: 1s all;
                        }
                    }
                }
                &:hover {
                    div {
                        .line {
                            width: 100%;
                            transition: 1s all;
                        }
                    }
                }
            }
        }
    }
    // 下拉菜单
    .topNav-menu {
        .ant-dropdown-menu {
            top: -5px;
            .ant-dropdown-menu-item {
                height: 800px;
                background: white;
            }
        }
    }
</style>